<template>
  <FullPage>
    <VGrid
      ref="vgrid"
      :formConfig="formConfig"
      :tableConfig="tableConfig"
      :proxy="proxy"
      @handleFormBtnClick="handleFormBtnClick"
      @handleTableBtnClick="handleTableBtnClick"
    ></VGrid>
    <UserFormDialog ref="userFormDialog" @submit="getTableData"></UserFormDialog>
    <UseerRoleDialog ref="userRoleDialog"></UseerRoleDialog>
  </FullPage>
</template>

<script>
import FullPage from '@/components/FullPage';
import VGrid from '@/components/VGrid';
import UserFormDialog from './UserFormDialog';
import UseerRoleDialog from './UserRoleDialog';

export default {
  components: {
    FullPage,
    VGrid,
    UserFormDialog,
    UseerRoleDialog,
  },
  name: 'user-management',

  data() {
    return {
      formConfig: {
        props: {
          inline: true,
        },
        btns: [
          {
            key: 'submit',
            label: '搜索',
          },
          {
            key: 'reset',
            label: '重置',
          },
          {
            key: 'addUser',
            label: '新增用户',
            type: 'success',
            icon: 'el-icon-plus',
          },
        ],
        fieldList: [
          {
            type: 'input',
            model: 'userName',
            label: '用户名',
            props: {
              placeholder: '请输入用户名',
            },
          },
          {
            type: 'input',
            model: 'showName',
            label: '姓名',
            props: {
              placeholder: '请输入姓名',
            },
          },
          {
            type: 'cascader',
            model: 'deptId',
            label: '部门',
            props: {
              placeholder: '请选择部门',
              props: {
                checkStrictly: true,
                value: 'id',
                label: 'deptName',
                children: 'children',
                emitPath: false,
                expandTrigger: 'hover',
              },
              options: resovle => {
                this.$api.account.department.getDepartmentTree().then(({ data }) => {
                  resovle(data);
                });
              },
              clearable: true,
              filterable: true,
              showAllLevels: true,
            },
          },
        ],
      },
      tableConfig: {
        props: {
          border: true,
          stripe: true,
        },
        columnList: [
          {
            prop: 'userName',
            label: '用户名',
          },
          {
            prop: 'userShowName',
            label: '姓名',
          },
          {
            prop: 'userTelephone',
            label: '电话',
          },
          {
            prop: 'deptName',
            label: '部门',
          },
          {
            label: '操作',
            type: 'operation',
            btns: [
              {
                key: 'userRole',
                label: '管理用户角色',
              },
              {
                key: 'edit',
                label: '编辑',
              },
              {
                key: 'delete',
                label: '删除',
              },
            ],
          },
        ],
      },
      proxy: {
        list: {
          api: this.$api.account.user.getUserList,
        },
        delete: {
          api: this.$api.account.user.deleteUser,
        },
      },
    };
  },

  methods: {
    handleFormBtnClick(key, params) {
      if (key === 'addUser') {
        this.$refs.userFormDialog.show('add');
      }
    },
    handleTableBtnClick(key, row) {
      if (key === 'edit') {
        this.$refs.userFormDialog.show('edit', row);
      }

      if (key === 'userRole') {
        this.$refs.userRoleDialog.show(row);
      }
    },

    getTableData() {
      this.$refs.vgrid.getTableData();
    },

    refreshTableData() {
      this.$refs.vgrid.refreshTableData();
    },
  },
};
</script>

<style lang="scss" scoped></style>
